<template>
  <div class="main">
    <div style="background-color: white">
      <el-input v-model="team.teamName" placeholder="请输入团队名称"></el-input>
      <el-select v-model="team.teamType" placeholder="请选择团队类型">
        <el-option
          v-for="item in teamTypeList"
          :key="item.type"
          :value="item.type"
        >
        </el-option>
      </el-select>
      <el-tooltip class="item" effect="dark" content="查询" placement="top-end">
        <el-button
          icon="el-icon-search"
          type="primary"
          circle
          @click="getDate()"
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="重置" placement="top-end">
        <el-button
          icon="el-icon-refresh-left"
          @click="reset()"
          type="info"
          circle
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="添加" placement="top-end">
        <el-button
          icon="el-icon-circle-plus-outline"
          type="primary"
          @click="openDialog('add')"
          style="margin-left: 600px"
          circle
        ></el-button>
      </el-tooltip>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="teamName"
        label="团队名"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="团队类型"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="teamMotto"
        label="座右铭"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="团队介绍"
        width="220"
      ></el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top-end"
          >
            <el-popconfirm
              title="您确定删除这个用户么？"
              cancel-button-text="算了算了"
              @confirm="handleDel(scope.row.id)"
            >
              <el-button
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-popconfirm>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="top-end"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="openDialog('edit', scope.row)"
              style="margin-left: 10px"
            ></el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="团队成员管理"
            placement="top-end"
          >
            <el-button
              type="primary"
              @click="openTeamMemberDialog(scope.row)"
              icon="el-icon-more"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      ></pagination>
    </div>

    <el-drawer
      :title="formTitle"
      size="35%"
      :visible.sync="drawerDialog"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="drawerForm">
        <el-form
          :model="teamForm"
          ref="teamForm"
          label-width="180px"
          :rules="rules"
        >
          <el-form-item label="团队名" prop="teamName">
            <el-input
              v-model="teamForm.teamName"
              placeholder="请输入团队名"
            ></el-input>
          </el-form-item>
          <el-form-item label="团队类型" prop="teamType">
            <el-select v-model="teamForm.teamType" placeholder="请选择团队类型">
              <el-option
                v-for="item in teamTypeList"
                :key="item.type"
                :value="item.type"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="团队座右铭" prop="teamMotto">
            <el-input
              v-model="teamForm.teamMotto"
              placeholder="请输入团队座右铭"
            ></el-input>
          </el-form-item>
          <el-form-item label="团队介绍" prop="remark">
            <el-input
              v-model="teamForm.remark"
              type="textarea"
              placeholder="请简单介绍一下你的团队，内容不超过30个字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitTeamForm('teamForm')"
              >提交</el-button
            >
            <el-button @click="resetTeamForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-dialog title="团队信息" :visible.sync="teamMemberDialog">
      <el-table :data="teamMemberList">
        <el-table-column
          property="userName"
          label="成员名"
          width="150"
        ></el-table-column>
        <el-table-column
          property="relationshipType"
          label="成员角色"
          width="150"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.relationshipType == 1">队长</span>
            <span v-if="scope.row.relationshipType == 2">成员</span>
          </template>
        </el-table-column>
        <el-table-column
          property="telephone"
          label="手机号"
          width="150"
        ></el-table-column>
        <el-table-column
          property="sex"
          label="性别"
          width="100"
        ></el-table-column>
        <el-table-column property="address" label="操作" width="130">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="退出团队"
              placement="top-end"
            >
              <el-button
                type="warning"
                icon="el-icon-s-promotion"
                @click="exitTeam(scope.row)"
                circle
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { listPageTeam, add, updateTeamById } from "@/api/team";
import { list, listPage } from "@/api/user";
import { listTeamType } from "@/api/teamType"; 
import { loDeletedUserAndTeamRea } from "@/api/teamUser";
import Pagination from "@/components/Pagination/index";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 10,
      drawerDialog: false,
      teamMemberDialog: false,
      formTitle: "",
      direction: "rtl",
      teamTypeList: [],
      teamLeaderList: [],
      teamMemberList: [],
      team: {
        teamName: "",
        teamLeader: "",
        teamType: "",
      },
      teamForm: {
        id: "",
        teamName: "",
        teamType: "",
        teamMotto: "",
        remark: "",
      },
      rules: {
        teamName: [
          { required: true, message: "请输入团队名", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        teamType: [
          { required: true, message: "请选择团队类型", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getDate();
    this.listUser();
  },
  methods: {
    changePageSize(val) {
      this.pageSize = val;
      this.getDate();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.getDate();
    },
    getDate() {
      //   console.log(this.role.roleName);
      const param = {
        page: this.pageNum,
        limit: this.pageSize,
        teamName: this.team.teamName,
        teamLeader: this.team.teamLeader,
        teamType: this.team.teamType,
      };
      listPageTeam(param).then((res) => {
        console.log(res.data);
        this.total = res.total;
        this.tableData = res.data;
      });
    },
    listUser() {
      this.listTeamTypes();
      list().then((res) => {
        if (res.code == 0) {
          this.teamLeaderList = res.data;
        } else {
          this.$message({
            message: "用户查询失败",
            type: "error",
          });
        }
      });
    },
    listTeamTypes() {
      listTeamType().then((res) => {
        if (res.code == 0) {
          this.teamTypeList = res.data;
        } else {
          this.$message({
            message: "用户查询失败",
            type: "error",
          });
        }
      });
    },
    reset() {
      this.team.teamName = "";
      this.team.teamLeader = "";
      this.team.teamType = "";
      this.getDate();
    },
    delete() {},
    resetTeamForm() {
      this.teamForm = {
        id: "",
        teamName: "",
        teamType: "",
        teamMotto: "",
        remark: "",
      };
    },
    openDialog(name, data) {
      console.log(name);
      if (name == "add") {
        this.resetTeamForm();
        this.formTitle = "添加";
      } else if (name == "edit") {
        this.formTitle = "编辑";
        console.log(data);
        this.teamForm = {
          id: data.id,
          teamName: data.teamName,
          teamType: data.type,
          teamMotto: data.teamMotto,
          remark: data.remark,
        };
      }
      this.drawerDialog = true;
    },
    handleClose() {
      console.log("关闭");
      this.drawerDialog = false;
    },
    async submitTeamForm(formName) {
      if (this.formTitle == "添加") {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            add(this.teamForm).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.drawerDialog = false;
                this.getDate();
              } else {
                this.$message({
                  message: "添加失败",
                  type: "error",
                });
              }
            });
          } else {
            this.$message({
              message: "您输入的信息不符合规范",
              type: "warning",
            });
          }
          this.getDate();
        });
      } else if (this.formTitle == "编辑") {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm("此操作将修改此用户信息, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              updateTeamById(this.teamForm).then((res) => {
                if (res.code == 0) {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.getDate();
                  this.drawerDialog = false;
                  this.resetTeamForm();
                } else {
                  this.$message({
                    message: "修改失败",
                    type: "error",
                  });
                }
              });
            });
          }
        });
      }
    },
    handleDel(teamId) {
      const team = {
        id: teamId,
        isDeleted: 1,
      };
      updateTeamById(team).then((res) => {
        if (res.code == 0) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          this.getDate();
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "erorr",
          });
        }
      });
    },
    listTeamMember(team){
      const param = {
        page: 1,
        limit: 100,
        teamName: team.teamName,
      };
      listPage(param).then((res) => {
        this.teamMemberList = res.data;
      });
    },
    openTeamMemberDialog(team) {
      this.teamMemberDialog = true;
      this.listTeamMember(team)
    },
    exitTeam(user) {
      console.log(user);
      const param = {
        userId: user.id,
        teamId: user.teamId,
      };
      this.$confirm("是否要踢出该成员?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        loDeletedUserAndTeamRea(param).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            const team = {
              teamName: user.teamName
            }
            this.listTeamMember(team);
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 150px;
  padding: 10px;
}
.el-select {
  width: 150px;
}
.el-table-column {
  text-align: center;
}
.main {
  margin-left: 30px;
}
.pagination {
  margin-top: 30px;
  text-align: center;
}
.el-input {
  width: 200px;
}
.el-textarea {
  width: 200px;
}
.el-select {
  width: 200px;
}
</style>
